<template>
  <div class="components-container">
    <div class="header-form">
      <!-- <label class="layui-form-label">火化炉区域</label>
      <div class="layui-inline">
        <el-select v-model="icaSelectIndex" placeholder="请选择" @change="getData">
          <el-option v-for="(item,index) in iceArea" :key="item.ICAID" :label="item.ICANAME" :value="index">
          </el-option>
        </el-select>
      </div> -->
      <div class="layui-inline">
        <el-button type="primary" @click="getData">刷新</el-button>
      </div>
      <div class="layui-inline" style="line-height:40px;margin-left:300px;">
          <div style="float:right;">
            <div style="width:30px;height:20px;background:#eb9e05;float:right;margin-top:10px;border-radius:5px;"></div>
            <span style="float:right;">已存入</span>
          </div>
          <div style="float:right;margin-right:20px;">
            <div style="width:30px;height:20px;background:#67c23a;float:right;margin-top:10px;border-radius:5px;"></div>
            <span style="float:right;">未存入</span>
          </div>
          <div style="float:right;margin-right:20px;">
            <div style="width:30px;height:20px;background:#878d99;float:right;margin-top:10px;border-radius:5px;"></div>
            <span style="float:right;">没有礼厅</span>
          </div>
      </div>
    </div>
    <!-- 火化炉图 -->
    <div class="tableContainer" style="position: relative">
      <div v-for="y in iceAreaInfo[0].SUMY" :style="{width:iceAreaInfo[0].SUMX*left+'px',height:top}" style="clear:left">
        <div v-for="x in iceAreaInfo[0].SUMX" class="iceplace iceplacedefault"></div>
      </div>
      <ul class="tableIceArea"> 
        <li v-for="(item, index) in iceAreaInfo" :style="{left: (left*(item.MEMXP-1)) + 'px', top: (top*(item.MEMYP-1)) + 'px' }" style=" position: absolute;">
          <div class="listCenter" :class="setDivClass(item)">
            <p v-text="item.MEMNAME" class="itemNo">0</p>
            <div class="iceName">
              {{item.REGNAME}}
            </div>
            <div class="tableToolList">
              <ul class="tableTool">
                <li class="saveBtn" @click="operate(OPEARTCODE.CR,item)" v-if="item.MemUse == null ">存</li>
                <li class="takeBtnEnadble" v-else>存</li>
                <li class="takeBtn" @click="operate(OPEARTCODE.QC,item)" v-if="item.MemUse !== null ">取</li>
                <li class="takeBtnEnadble" v-else>取</li>
                <li class="moreBtn">
                  <el-dropdown>
                    <span class="el-dropdown-link">
                                              ...
                                          </span>
                    <el-dropdown-menu slot="dropdown">
                      <div v-if="item.MemUse != null">
                        <el-dropdown-item @click.native="operate(OPEARTCODE.DELETE,item)">删除</el-dropdown-item>
                        <el-dropdown-item @click.native="operate(OPEARTCODE.INFO,item)">详情</el-dropdown-item>
                      </div>
                      <div v-else>
                        <el-dropdown-item class="linkdisable">删除</el-dropdown-item>
                        <el-dropdown-item class="linkdisable">详情</el-dropdown-item>
                      </div>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <main-model ref="dialog" @refreshData="getData"></main-model>
  </div>
</template>

<script>
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import mainModel from "./mourningUseMain";
import {
    manage
  } from "@/mixins/managePage.js";
const INFO = "详情";
const IN = "开始使用";
const OUT = "结束使用";
const DELETE = "删除";
export default {
  name: "iceUse",
  mixins: [manage],
  data() {
    return {
      OPEARTCODE: {
        CR: "开始使用",
        QC: "结束使用",
        DELETE: "删除",
        INFO: "详情"
      },
      left: "160",
      top: "140",
      iceAreaInfo: [
        {SUMY: null,SUMX: null}
      ], //获取冰柜区域的冰柜及使用信息
      MemUse: {}, //取出  业务编号
     
    };
  },
  methods: {
    //功能操作
    operate(order, meh) {
      this.order = order;
      switch (this.order) {
        case IN:
          this.$refs.dialog.open(this.order, meh.MEMID,meh);
          break;
        case OUT:
          this.$refs.dialog.open(this.order, meh.Meh.MEHID,meh);
          break;
        case INFO:
          this.$refs.dialog.open(this.order, meh.Meh.MEHID,meh);
          break;
        case '修改':
          this.$refs.dialog.open(this.order, meh.Meh.MEHID,meh);
          break;
        case DELETE:
          // this.$refs.dialog.open(this.order, meh.Meh.MEHID,meh);
          this.dataDelete(meh.Meh.MEHID);
          break;
        default:
          break;
      }
    },
    //删除
    dataDelete(id) {
      var data = {
        CRHID: id
      };
      this.$confirm("此操作将永久删除该使用信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(callback => {
          apiBase.DoService(
            data,
            apiBase.getApiAdress().CremationUse.Delete,
            res => {
              this.getData();
              this.$message({
                message: "删除火化炉成功！",
                type: "success"
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
  
    //获取的礼厅及使用信息
    getData() {
        var data = {
          //请求体
          PageIndex: this.pageOrder.currentPage,
          PageSize: this.pageOrder.pageSize,
          OrderBy: this.pageOrder.orderType,
          OrderByType: this.pageOrder.orderSort,
        };
        apiBase.DoService(
        data,
        apiBase.getApiAdress().MemorialUse.QueryMemUseByArea,
        res => {
          this.iceAreaInfo = res.data.content;
          this.iceAreaInfo.forEach((item, index) => {
            if (item.CREID !== null && item.MemUse != null)
              item.REGNAME = item.MemUse.REGNAME;
            else item.REGNAME = "";
          });
        }
      );
    },
    setDivClass(cre) {
      if (cre === undefined) return "";
      if (cre.MemUse === null)
        return "iceplace iceplaceCanuse";
      else if (cre.MemUse !== null) return "iceplace iceplaceUseed";
      // else if (cre.MemUse == null) return "iceplace iceplaceMoreUseed";
    }
  },
  mounted() {
    this.getData();
  },
  created() {
    // this.getData();
  },
  //路由的时候刷新组件
  activated: function() {
    this.getData();
  },
  components: {
    mainModel,
    dataTable
  }
};
</script>

<style lang="less" scoped>
.longtext {
  width: 465px;
}
.btnCenter {
  text-align: center;
}
table.tableIfon {
  th {
    font-weight: normal;
  }
  td {
    text-align: left;
    padding-right: 20px;
  }
}
select::-ms-expand {
  //ie下啦箭头隐藏
  display: none;
}
select.nameOptions {
  width: 100px;
  display: inline-block;
  margin-right: 10px;
  background: transparent;
  border: none;
  box-shadow: inset 0 0px 0px rgb(255, 255, 255);
  margin: auto;
  display: block;
  text-align-last: center;
}
.datepicker-popup {
  position: fixed !important;
}
table.iceTable {
  width: 100%;
  td {
    width: 50px;
    height: 200px;
    border: 1px solid #dcdcdc;
  }
}
div.tableContainer {
  width: 100%;
  max-height: 500px;
  overflow: auto;
  margin-top: 20px;
  ul.tableIceArea {
    overflow: hidden;
    width: 100%;
    height: 100%;
    li {
      width: 150px;
      height: 130px;
      div.listCenter {
        p.itemNo {
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.iceName {
          height: 40px;
          width: 100%;
          text-align: center;
          padding-top: 15px;
          font-size: 18px;
          color: white;
          font-weight: bold;
        }
        div.tableToolList {
          overflow: hidden;
          ul.tableTool {
            width: 90px;
            margin: 10px auto 0;
            overflow: hidden;
            height: 30px;
            li {
              float: left;
              width: 30px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              padding: 0;
              margin: 0;
              cursor: pointer;
              position: inherit;
            }
            li.saveBtn {
              background: #009289;
              color: white;
            }
            li.takeBtn {
              // background: #eaeaea;
              background: #ff2021;
              color: white;
            }
            li.takeBtnEnadble {
              // background: #eaeaea;
              background: #eef1f6;
              color: #878d99;
              cursor: not-allowed;
            }
            li.moreBtn {
              background: #ef9000;
              color: white;
              span.el-dropdown-link {
                color: white;
              }
            }
          }
        }
      }
    }
  }
}
.linkdisable {
  background: #eef1f6;
  color: #878d99;
  cursor: not-allowed;
}
.iceplace {
  margin: 5px;
  width: 150px;
  height: 130px;
  float: left;
}
.iceplacedefault {
  background-color: #878d99;
}
.iceplaceCanuse {
  background-color: #67c23a;
}
.iceplaceUseed {
  background-color: #eb9e05;
}
.iceplaceMoreUseed {
  background-color: #fa5555;
}
</style>
